<!-- <template>
  <div id="app">
    <TreeChart :json="data" :class="{landscape: 1}" @click-node="clickNode" />

    <div class="gl_prs_ctn" :style='[contextstyle]'>
      <ul class='gl_prs_li'>
        <el-col :span="4">
          <el-button type="primary" @click="dialogAddVisible = true">添加家族成员</el-button>
        </el-col>


      </ul>
    </div>

  </div>
  <el-dialog title="添加家族成员" v-model="dialogAddVisible" width="50%">
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
      <el-form-item label="姓名" prop="supplierName">
        <el-input v-model="addForm.supplierName"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="supplierShortname">
        <el-input v-model="addForm.supplierShortname"></el-input>
      </el-form-item>
      <el-form-item label="死亡日期" prop="supplierAddress">
        <el-input v-model="addForm.supplierAddress"></el-input>
      </el-form-item>
      <el-form-item label="结婚日期" prop="supplierCtelephone">
        <el-input v-model="addForm.supplierCtelephone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="supplierEmail">
        <el-input v-model="addForm.supplierEmail"></el-input>
      </el-form-item>
      <el-form-item label="家庭地址" prop="supplierLiaisonman">
        <el-input v-model="addForm.supplierLiaisonman"></el-input>
      </el-form-item>
      <el-form-item label="生平简介" prop="supplierLtelephone">
        <el-input v-model="addForm.supplierLtelephone"></el-input>
      </el-form-item>
      <el-form-item label="荣誉" prop="supplierRemarks">
        <el-input v-model="addForm.supplierRemarks"></el-input>
      </el-form-item>
    </el-form>
     <span slot="footer" class="dialog-footer" style="margin-left: 38%;"> -->
			<!-- <el-button type="primary" @click="addSupplier">确 定</el-button>
			<el-button @click="dialogAddVisible = false">取 消</el-button> -->
		<!-- </span> -->
  <!--</el-dialog>

</template>

<script>

    import TreeChart from "./treechar";
    export default {
        name: 'app',
        components: {
            TreeChart
        },
        data() {
            var checkEmail = (rule, value, callback) => {
                const regEmail =
                    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                if (regEmail.test(value)) {
                    return callback();
                }
                callback(new Error("请输入合法的邮箱"));
            };
            return {
                data: {
                    name: 'root',
                    image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg",
                    class: ["rootNode"],

                    children: [
                        {
                            name: 'children1',
                            image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg",
                            children: [
                                {
                                    name: 'grandchild4',
                                    image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg"
                                },
                                {
                                    name: 'grandchild5',
                                    image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg"
                                },
                                {
                                    name: 'grandchild6',
                                    image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg"
                                }
                            ]
                        },
                        {
                            name: 'children2',
                            image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg",
                            children: [
                                {
                                    name: 'grandchild',
                                    image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg"
                                },
                                {
                                    name: 'grandchild2',
                                    image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg"
                                },
                                {
                                    name: 'grandchild3',
                                    image_url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3689173839,956040439&fm=26&gp=0.jpg"
                                }
                            ]
                        }
                    ]
                },
                contextstyle: {
                    display: 'none',
                    right: '0px',
                    top: '0px',
                    left: '0px',
                    bottom: '0px',
                },
                isLoading:false,
                dialogAddVisible: false,
                dialogEditVisible: false,
                queryInfo: {
                    searchName: '',
                    page: 1,
                    limit: 10
                },
                supplierList: [], // 供应商列表
                total: 0, // 最大数据记录
                addForm: {
                    supplierName: '',
                    supplierShortname: '',
                    supplierAddress: '',
                    supplierCtelephone: '',
                    supplierEmail: '',
                    supplierLiaisonman: '',
                    supplierLtelephone: '',
                    supplierRemarks: '',
                },
                editForm: {
                    id: '',
                    supplierName: '',
                    supplierShortname: '',
                    supplierAddress: '',
                    supplierCtelephone: '',
                    supplierEmail: '',
                    supplierLiaisonman: '',
                    supplierLtelephone: '',
                    supplierRemarks: '',
                },
                addFormRules: {
                    supplierName: [{
                        required: true,
                        message: "请输入家族成员姓名",
                        trigger: "blur"
                    }],
                    supplierShortname: [{
                        required: true,
                        message: "请输入家族成员出生日期",
                        trigger: "blur"
                    }],
                    supplierAddress: [{
                        required: true,
                        message: "请输入家族成员死亡日期",
                        trigger: "blur"
                    }],
                    supplierCtelephone: [{
                        required: true,
                        message: "请输入家族成员结婚日期",
                        trigger: "blur"
                    }],
                    supplierLtelephone: [{
                        required: true,
                        message: "请输入家族成员生平简介",
                        trigger: "blur"
                    }],
                    supplierEmail: [{
                        required: true,
                        trigger: "blur",
                        validator: checkEmail,
                    }],
                    supplierLiaisonman: [{
                        required: true,
                        message: "请输入家族成员家庭住址",
                        trigger: "blur"
                    }],
                },
                editFormRules: {
                    supplierName: [{
                        required: true,
                        message: "请输入家族成员姓名",
                        trigger: "blur"
                    }],
                    supplierShortname: [{
                        required: true,
                        message: "请输入家族出生日期",
                        trigger: "blur"
                    }],
                    supplierAddress: [{
                        required: true,
                        message: "请输入家族成员死亡日期",
                        trigger: "blur"
                    }],
                    supplierCtelephone: [{
                        required: true,
                        message: "请输入家族成员结婚日期",
                        trigger: "blur"
                    }],
                    supplierLtelephone: [{
                        required: true,
                        message: "请输入家族成员生平简介",
                        trigger: "blur"
                    }],
                    supplierEmail: [{
                        required: true,
                        trigger: "blur",
                        validator: checkEmail,
                    }],
                    supplierLiaisonman: [{
                        required: true,
                        message: "请输入家族成员住址",
                        trigger: "blur"
                    }],
                },
            }
        },
        created(){
            document.oncontextmenu = ()=>{return false}
            document.addEventListener("click", (event) => {
                if(this.contextstyle.display == 'block'){
                    this.contextstyle.display = 'none'
                }
            })
            this.getSupplierList();
        },
        methods: {
            clickNode(node){
                if(window.event.x + 188 > document.documentElement.clientWidth){
                    this.contextstyle.left = 'unset';
                    this.contextstyle.right = document.documentElement.clientWidth - window.event.x + 'px';
                }else{
                    this.contextstyle.left = window.event.x + 'px';
                }
                if(window.event.y + 166 > document.documentElement.clientHeight){
                    this.contextstyle.top = 'unset';
                    this.contextstyle.bottom = document.documentElement.clientHeight - window.event.y + 'px';
                }else{
                    this.contextstyle.top = window.event.y + 'px';
                }
                this.contextstyle.display = 'block';
            },
            async getSupplierList() {
                this.isLoading = true;
                // 调用post请求
                const {
                    data: res
                } = await this.$http.get("system/apis/supplier", {
                    params: this.queryInfo
                });
                if (res.code != 20000) {
                    this.$message.error("加载供应商列表失败");
                    this.isLoading = false;
                }
                this.supplierList = res.data.value; // 将返回数据赋值
                this.total = res.data.total; // 总个数
                this.isLoading = false;
            },
            // 监听pageSize改变的事件
            handleSizeChange(newLimit) {
                this.queryInfo.limit = newLimit;
                this.getSupplierList(); // 数据发生改变重新申请数据
            },
            // 监听pageNum改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.page = newPage;
                this.getSupplierList(); // 数据发生改变重新申请数据
            },
            addSupplier() {
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) return;
                    // 发起请求
                    const {
                        data: res
                    } = await this.$http.post("/system/apis/supplier", this.addForm);
                    if (res.code == 20000) {
                        this.getSupplierList();
                        this.dialogAddVisible = false;
                        return this.$message.success("添加成功");
                    }
                    this.$message.error("添加失败");
                })
            },

            updateSupplier() {
                this.$refs.editFormRef.validate(async valid => {
                    if (!valid) return;
                    // 发起请求
                    const {
                        data: res
                    } = await this.$http.put("/system/apis/supplier", this.editForm);
                    if (res.code == 20000) {
                        this.getSupplierList();
                        this.dialogEditVisible = false;
                        return this.$message.success("编辑成功");
                    }
                    this.$message.error("编辑失败");
                })
            },
            dialogEditOpen(id, supplierName,  supplierShortname, supplierAddress, supplierCtelephone, supplierEmail, supplierLiaisonman, supplierLtelephone, supplierRemarks) {
                this.editForm.id = String(id);
                this.editForm.supplierName = String(supplierName);
                this.editForm.supplierShortname = String(supplierShortname);
                this.editForm.supplierAddress = String(supplierAddress);
                this.editForm.supplierCtelephone = String(supplierCtelephone);
                this.editForm.supplierEmail = String(supplierEmail);
                this.editForm.supplierLiaisonman = String(supplierLiaisonman);
                this.editForm.supplierLtelephone = String(supplierLtelephone);
                this.editForm.supplierRemarks = String(supplierRemarks);
                this.dialogEditVisible = true;
            },
        }
    }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  .gl_prs_ctn{
    width: 100%;
    background-color: rgb(249, 246, 255);
    box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(102, 175, 233, 0.6) 0px 0px 8px;
    z-index: 99999;
    position: fixed;
    padding: 10px;
    box-sizing: content-box;
    height: 100%;
  }
  .gl_prs_li{padding: unset;margin: unset;}
  .gl_prs_li>li{
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid #efefef;
    padding: 7px 10px;
  }
  li:last-child { border: unset }
  li:hover{
    background: #ccc;
    color: #fff;
  }
</style> -->
